<template>
  <div>
    <div class="back-top-comp" :class="{'show-back-top-comp': showBackTop }" @click="handleBackTop">
      <img src="https://image.doulaoban.com/applet/image/1709536748430_返回顶部.png" class="back-top-icon">
      <div>顶部</div>
    </div>
  </div>
</template>
<script>
let RollingTime = 0;
export default {
  components: {},
  props: {

  },
  data() {
    return {
      // 页面正在滚动中
      pageRolling: false,
      // 是否显示返回顶部按钮
      showBackTop: false,
    }
  },
  mounted() {
    uni.$on('onPageScroll', ({ scrollTop }) => {
      this.showBackTop = scrollTop > 260;
      this.pageRolling = true;
      clearTimeout(RollingTime);
      RollingTime = setTimeout(() => {
        this.pageRolling = false;
      }, 300);
    })
  },
  methods: {
    handleBackTop() {
      wx.pageScrollTo({ scrollTop: 0 });
    }
  },
}
</script>
<style lang="less" scoped>
.back-top-comp {
  position: fixed;
  right: 2%;
  bottom: 10%;
  display: none;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  font-family: "PingFang SC";
  font-size: 10px;
  font-style: normal;
  font-weight: 400;
  line-height: 14px; /* 140% */
  color: var(--mian-color);
  background-color: var(--divider-line-2-color);
  border: 1px solid rgba(255, 255, 255, 0.60);
  border-radius: 50%;

  .back-top-icon {
    width: 16px;
    height: 16px;
  }
}

.show-back-top-comp {
  display: flex;
}
</style>